<template>
	<a-card :bordered="false">
		<a-row :gutter="24">
			<a-col :md="4">
				<div class="table-operator">
					<div style="border-color: #0077aa">
						<a-dropdown :trigger="['contextmenu']">
							<a-tree @select="onSelect" :treeData="treeData" :selectedKeys="selectedKeys" @rightClick="rightClick">
							</a-tree>
							<a-menu slot="overlay" v-action:category:save>
								<a-menu-item key="1" @click="createCate">
									<a-icon type="folder-add" />
									<span>创建子栏目</span>
								</a-menu-item>

								<a-menu-item key="2" @click="handleDelete(rightItem)">
									<a-icon type="file-add" />
									<span>删除栏目</span>
								</a-menu-item>

								<a-menu-item key="4" v-if="rightItem.id === '0'" @click="initTreeCategory">
									<a-icon type="reload" />
									<span>刷新栏目</span>
								</a-menu-item>

								<!-- <a-menu-item key="5" v-if="rightItem.id==='0'">
                  <a-icon type="reload" />
                  <span>重置栏目</span>
                </a-menu-item> -->
							</a-menu>
						</a-dropdown>
					</div>
				</div>
			</a-col>
			<a-col :md="20">
				<p style="color: red">PS:栏目操作请右键点击左侧栏目</p>
				<s-table
					ref="table"
					size="small"
					bordered
					rowKey="id"
					:columns="columns"
					:data="loadData"
					:locale="{ emptyText: '暂无子栏目' }"
				>
					<span slot="action" slot-scope="text, record">
						<template>
							<a-tag color="orange" v-action:category:edit @click="handleEdit(record)">编辑</a-tag>
							<a-tag color="red" v-action:category:del @click="handleDelete(record)">删除</a-tag>
							<!-- <a-tooltip placement="top">
								<template slot="title">
									<span>重新生成栏目静态化列表</span>
								</template>
								<a-tag color="green" v-action:category:static v-if="!record.onlyUrl" @click="reStaticFile(record)"
									>静态化</a-tag
								>
							</a-tooltip> -->

							<!-- <a-tooltip placement="top">
								<template slot="title">
									<span>指定该栏目不同的动作配置不同的策略管理</span>
								</template>
								<a-tag color="blue" @click="strategyConfig(record)">策略管理</a-tag>
							</a-tooltip> -->
							<a-tag color="orange" v-action:category:edit @click="selectOthers(record)">设置信息</a-tag>
						</template>
					</span>
					<span slot="categoryExtendId" slot-scope="text">
						<template>
							<a-tag color="green" v-if="text">是</a-tag>
							<a-tag color="red" v-if="!text">否</a-tag>
						</template>
					</span>
					<span slot="hidden" slot-scope="text">
						<template>
							<a-tag color="red" v-if="text">否</a-tag>
							<a-tag color="green" v-if="!text">是</a-tag>
						</template>
					</span>
					<span slot="allowContribute" slot-scope="text">
						<template>
							<a-tag color="green" v-if="text">是</a-tag>
							<a-tag color="red" v-if="!text">否</a-tag>
						</template>
					</span>
					<span slot="cname" slot-scope="text">
						<template>
							<span v-html="$substr(text, 5)"></span>
						</template>
					</span>
				</s-table>
			</a-col>
		</a-row>

		<handle ref="handle" @ok="handleOk"></handle>
		<handles ref="handleForm" @ok="handleOk"></handles>
		<strategy ref="strategy"></strategy>
	</a-card>
</template>

<script>
// import handles from './handles.vue'
import handles from '../../content/manager/handles.vue'
import { treeCategory, delByPk, page, genCategory, selectOthersMsg } from '@/api/site/category'
import handle from './handle'
import strategy from './strategy'
import { STable } from '@/components'
// import notifySocket from '@/components/NotifySocket/NotifySocket.vue'
export default {
	name: 'TableList',
	components: {
		STable,
		handle,
		handles,
		strategy,
	},
	props: {
		statusFilter: {
			type: Function,
			default: undefined,
		},
	},
	data() {
		return {
			mdl: {},
			advanced: false,
			treeData: [],
			selectedKeys: ['0'],
			rightItem: {},
			dropdownVisible: false,
			queryParam: {
				dto: {},
			},
			columns: [
				{
					title: '栏目名称',
					dataIndex: 'name',
					scopedSlots: {
						customRender: 'cname',
					},
				},
				{
					title: '父栏目',
					dataIndex: 'parentName',
				},
				{
					title: '栏目编码',
					dataIndex: 'code',
				},
				// {
				// 	title: '排序',
				// 	dataIndex: 'sort',
				// },
				{
					title: '栏目模型',
					dataIndex: 'categoryExtendId',
					scopedSlots: {
						customRender: 'categoryExtendId',
					},
				},
				// {
				// 	title: '前台显示',
				// 	dataIndex: 'hidden',
				// 	scopedSlots: {
				// 		customRender: 'hidden',
				// 	},
				// },
				{
					title: '允许投稿',
					dataIndex: 'allowContribute',
					scopedSlots: {
						customRender: 'allowContribute',
					},
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '350px',
					scopedSlots: {
						customRender: 'action',
					},
				},
			],
			loadData: (parameter) => {
				return page(Object.assign(parameter, this.queryParam)).then((response) => {
					if (response.code === 0) {
						return response.res
					} else {
						return { total: 0, rows: [] }
					}
				})
			},
		}
	},
	created() {
		this.initTreeCategory()
	},
	methods: {
		initTreeCategory() {
			treeCategory().then((response) => {
				if (response.code === 0) {
					this.treeData = [response.res]
				}
			})
		},
		onSelect(selectedKeys, e) {
			if (e.selected) {
				this.selectedKeys = selectedKeys
			}
			this.queryParam.dto.parentId = e.node.dataRef.id
			this.$refs.table.refresh()
		},
		rightClick(e) {
			this.selectedKeys = [e.node.eventKey]
			this.rightItem = e.node.dataRef
			this.dropdownVisible = true
			this.onSelect(this.selectedKeys, e)
		},
		strategyConfig(record) {
			this.$refs.strategy.add(record)
		},
		reStaticFile(record) {
			genCategory({ id: record.id }).then((response) => {
				if (response.code === 0) {
					this.$message.info('请稍后~')
				} else {
					this.$message.error(response.msg)
				}
			})
		},
		createCate() {
			this.$refs.handle.add(this.rightItem)
		},
		handleDelete(record) {
			const that = this
			this.$confirm({
				title: '操作提醒',
				content: '确定要删除吗?',
				onOk() {
					delByPk({
						id: record.id,
					})
						.then((response) => {
							that.handleOk()
							that.$message.info(response.msg)
						})
						.catch((response) => {
							that.$message.warn(response.msg)
						})
				},
				onCancel() {},
			})
		},
		handleEdit(record) {
			this.$refs.handle.edit(record)
		},
		handleOk() {
			this.$refs.table.refresh()
			this.initTreeCategory()
		},
		resetSearchForm() {
			this.queryParam = {
				dto: {},
			}
			this.handleOk()
		},

		// selectOthers (record) {
		//   selectOthersMsg({ categoryId: record.id }).then(response => {
		//     console.log(response);
		//       // if (response.code === 0) {
		//       //   this.$message.info('请稍后~')
		//       // } else {
		//       //   this.$message.error(response.msg)
		//       // }
		//   })
		// },
		selectOthers(record) {
			this.$refs.handleForm.edit(record)
		},
	},
}
</script>
